<template>
	<view>
		<!-- 页面头部 -->
	<view class="con-head">
		<view class="head-img">
			<image style="height: 260px; width: 375px;" :src="image" mode=""></image>
		</view>
		<view class="head-title">
			{{title}}
		</view>
		<view class="head-bg"></view>
	</view>
	<!-- 页面内容 -->
	<view class="con-contnet">
		<rich-text :nodes="article"></rich-text>
	</view>
	<!-- 页面评论 -->
	<view class="comment">
		<view class="com-back" @click="backTo">
			<view class="iconfont icon-zuojiantou"></view>
		</view>
		<view class="com-talk" @click="remarkTo">
			<view class="iconfont icon-pinglun"></view>
			<view class="num">6</view>
		</view>
		<view class="com-good" @tap="btnMask">
			<view class="iconfont icon-dianzan"></view>
			<view class="num">57</view>
		</view>
		<view class="com-start" @tap="btnMask">
			<view class="iconfont icon-shoucang"></view>
		</view>
		<view class="com-shart" @tap="btnMask">
			<view class="iconfont icon-fenxiang"></view>
		</view>
	</view>
	<!-- 页面弹窗 -->
	<view class="mask" v-if="mask" @tap="hideMask">
		<view class="login-mask">
			<view class="mask-name">登录一晨看报</view>
			<view class="mask-con">选择登录方式</view>
			<view class="mask-choose" >
				<view class="mask-weixi" @tap="btnLoading">
					<view class="iconfont icon-weixin"></view>
				</view>
				<view class="mask-qq" @tap="btnLoading">
					<view class="iconfont icon-QQ"></view>
				</view>
			</view>
			<view class="mask-xieyi">
					<view class="radio"></view>
				<view class="txt">我同意<a class='one'>《一晨协议》</a>和<a class='one'>《个人信息保护指引》</a></view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	//引入richText.js
	import graceRichText from '../../components/richText.js';
	
	export default {
		data() {
			return {
				article : "<div>正在加载中.....<div>",
				title : '',
				image : '',
				id : ' ',
				mask : false,
			}
		},
		methods: {
			backTo(){
				uni.navigateBack();
			},
			remarkTo(){
				console.log("hhhh");
				console.log("id",this.id);
				uni.navigateTo({
					url:"../../pages/remark/remark?id="+this.id,
				})
			},
			btnMask(){
				this.mask = true;
			},
			hideMask(){
				this.mask = false;
			},
			btnLoading(){
				uni.showToast({
				    title: '登录失败',
					icon : 'none'
				});
				setTimeout(function () {
				    uni.hideToast();
				}, 2000);
			}
		},
		onLoad(option){
			// console.log(option.id);
			let id = option.id;
			this.id = id;
			// console.log(id);
			
			let url = "https://apis.netstart.cn/zhihudaily/story/" + id;
			uni.request({
				url:url,
				method:"GET",
				success:(response)=>{
					let res = response.data.story;
					let body = res.body;
					this.title = res.title;
					this.image = res.image;
				    // console.log(body);
					// console.log(this.image);
					this.article = body;
					
				},
				fail: () => {
					console.log("请求失败...")
				}
			})
			
		}
	}
</script>

<style>
	@import '../../common/content.css';
	/* 引入iconfontcss */
	@import '../../common/iconfont.css';
	
	.headline .img-place-holder[data-v-49c01bfa] {
	    height: 0px;
	}
	
.one{
	color: #0066CF;
}	
/* 页面头部 */
.con-head{
	width: 100%;
	height: 260px;
	position: relative;
	background-color: #4CD964;
}
.con-head .head-img{
	position: absolute;
}
.con-head .head-title{
	position: absolute;
	font-size: 22px;
	color: #fff;
	font-weight: bold;
	padding-left: 10px;
	margin-top: 190px;
	z-index: 2;
}
.con-head .head-bg{
	width: 100%;
	height: 80px;
	position: absolute;
	margin-top: 180px;
	background: rgba(0,0,0,0.6);
	opacity: 0.5;
	fliter:blur(20px);
	z-index: 1;
	box-shadow:0 -10px 3px -1px  rgba(0,0,0,0.5);
}
/* 页面评论*/
.comment{
	width: 100%;
	height: 60px;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #f6f6f6;
	display: flex;
}
.comment >view{
	width: 75px;
	height: 40px;
	line-height: 40px;
	margin-top: 10px;
	text-align: center;
}
.comment >view >view{
	font-size: 24px;
	color: #000;
}
.comment .com-back{
	border-right: 1px solid #999988;
}
.comment .com-talk{
	display: flex;
}
.comment .com-talk .iconfont{
	padding-left: 20px;
}
.comment .com-talk .num{
	font-size: 16px;
	padding-left: 5px;
}
.comment .com-good{
	display: flex;
}
.comment .com-good .iconfont{
	padding-left: 15px;
	font-size: 30px;
}
.comment .com-good .num{
	font-size: 16px;
	padding-left: 3px;
}
.comment .com-start .iconfont{
	font-size: 30px;
}
.comment .com-shart .iconfont{
	font-size: 30px;
}
/* 遮罩层 */
.mask{
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 1001;
	background:rgba(0,0,0,.6) ;
	top: 0;
	left: 0;
}
.mask .login-mask{
	width: 100%;
	height: 250px;
	position: fixed;
	bottom: 0;
	left: 0;
	text-align: center;
	background-color: #fff;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}
.login-mask .mask-name{
	font-size: 24px;
	font-weight: bold;
	margin-top: 20px;
}
.login-mask .mask-con{
	font-size: 16px;
	color: #808080;
	margin-top: 15px;
}
.login-mask .mask-choose{
	display: flex;
	justify-content: center;
	margin-top: 10px;
	margin-bottom: 10px;
}
.login-mask .mask-choose .mask-weixi{
	width: 60px;
	height: 60px;
	line-height: 60px;
	border-radius: 50%;
	margin-right: 10px;
	background-color: #09BB07;
}
.login-mask .mask-choose .mask-weixi .iconfont{
	font-size: 30px;
	color: #fff;
}
.login-mask .mask-choose .mask-qq{
	width: 60px;
	height: 60px;
	line-height: 60px;
	border-radius: 50%;
	margin-left: 10px;
	background-color: #007AFF;
}
.login-mask .mask-choose .mask-qq .iconfont{
	font-size: 30px;
	color: #fff;
}
.mask-xieyi{
	display: flex;
	margin-top: 30px;
}
.mask-xieyi .radio{
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border:3px solid  #B3B3B3;
	background: #ccc;
	margin-left: 10px;
}
.mask-xieyi .txt{
	color: #B2B2B2;
	font-size: 16px;
	margin-left: 10px;
}
</style>
